import React from 'react';
import { CSSTransition } from 'react-transition-group'; // react 中的动画效果
import { actionCreators } from './store' // 引入actionCreate
import { connect } from 'react-redux' // 连接仓库store
// 引入样式
import {
  HeaderWrapped,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  SearchWrapper,
  SearchInfoTitle,
  SearchInfo,
  SearchInfoSwitch,
  SearchInfoItem,
  Addition,
  Button
} from './style'

// 创建换一换列表
const getNewList = (pageNum, list) => {
  const newList = []
  const jsList = list.toJS()
  for (let i = (pageNum - 1) * 5; i < pageNum * 5; i++) {
    if (jsList[i]) {

      newList.push(
        <SearchInfoItem key={i}>{jsList[i]}</SearchInfoItem>
      )

    }
  }
  return newList
};

const getListArea = (props) => {
  const { focus, list, mouseIn, handleSwitch, handleMouseEnter, handleMouseLeave, pageNum, totalPage } = props

  if (focus || mouseIn) {
    return (
      <SearchInfo
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <SearchInfoTitle>热门搜索
      <SearchInfoSwitch onClick={() => handleSwitch(pageNum, totalPage)}>
            <i className='iconfont spin'>&#xe723;</i>
            换一批</SearchInfoSwitch>
        </SearchInfoTitle>
        <div>{
          getNewList(pageNum, list)
        }

        </div>
      </SearchInfo>
    )
  }
  else {
    return null
  }
}

// 将header 抽象为函数组件 引入hook以后没有 无状态组件这个说法
const Header = (props) => {
  // 使用解构赋值 获取 仓库中 传递过来的 数据和 方法
  const { focus, list, handleInputFocus, handleInputBlur } = props

  return (
    <HeaderWrapped>
      <Logo />
      <Nav>
        <NavItem className='left active'>首页</NavItem>
        <NavItem className='left'>下载App</NavItem>
        <NavItem className='right'>登录</NavItem>
        <NavItem className='right'>
          <i className='iconfont'>&#xe602;</i>
        </NavItem>
        {/* 搜索框是难点 */}
        <SearchWrapper>
          {/* 添加动画 */}
          <CSSTransition
            in={focus}
            timeout={200}
            classNames='slide'
          >
            <NavSearch
              className={focus ? 'focused' : ''}
              onFocus={() => handleInputFocus(list)}
              onBlur={handleInputBlur}
            ></NavSearch>
          </CSSTransition>

          <i className={focus ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe60c;</i>
          {getListArea(props)}
        </SearchWrapper>

      </Nav>
      <Addition>
        <Button className='writting'>
          <i className='iconfont'>&#xe616;</i>
          写文章</Button>
        <Button className='reg'>注册</Button>
      </Addition>
    </HeaderWrapped>
  )
}


// 映射 数据 
const mapStateToProps = (state) => {
  // console.log('header下的state', state.get('header'))
  return {
    // immutable 的获取属性方法
    // focus: state.header.get('focus')
    // focus: state.header.focus
    // redux-immutable的获取属性方法 
    // a
    // focus: state.get('header').get('focus')
    // b 
    // 一个大仓库中的小仓库 名为header 所以使用header为前缀 来获取到精确的数据
    focus: state.getIn(['header', 'focus']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    list: state.getIn(['header', 'list']),
    pageNum: state.getIn(['header', 'pageNum']),
    totalPage: state.getIn(['header', 'totalPage']),
  }
}
// 映射方法
const mapDispatchToProps = (dispatch) => {
  return {
    handleInputFocus(list) {
      if (list.size === 0) {
        // 判断搜索列表内容是否存在 不存在则获取
        console.log('获取搜索列表动作')
        dispatch(actionCreators.getSearchList())
      } else {
        console.log('搜索列表数据已经存在')
      }
      // 原始写法
      // const action = {
      //   type: '常量中某个数据，有唯一的reducer与之对应'
      // }
      // // 然后派发 该动作
      // dispatch(action)
      // actionCreators.searchFocus() 返回的就是一个action对象
      dispatch(actionCreators.searchFocus())
    },
    handleInputBlur() {
      dispatch(actionCreators.searchBlur())
    },
    handleMouseEnter() {
      dispatch(actionCreators.mouseEnter())
    },
    handleMouseLeave() {
      dispatch(actionCreators.mouseLeave())
    },
    // 处理换一换点击事件
    handleSwitch(pageNum, totalPage) {
      if (pageNum < totalPage) {
        pageNum += 1
      } else {
        pageNum = 1
      }
      // console.log(pageNum)
      dispatch(actionCreators.changePageNum(pageNum))
    }

  }
}
// 将header 组件 和 仓库中的内容 和 动作派发关联起来
export default connect(mapStateToProps, mapDispatchToProps)(Header)
